---
image: /generated/articles-docs-enable-scss-overview.png
sidebar_label: Overview
title: '@remotion/enable-scss'
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import {ExperimentalBadge} from '../../components/Experimental';
import {TableOfContents} from './TableOfContents';

This package provides a Webpack override for enabling [SCSS/SASS](https://sass-lang.com/) with Remotion..

## Installation

Install `@remotion/enable-scss` as well as TailwindCSS dependencies.

<Installation pkg="@remotion/enable-scss sass@1.77.2 sass-loader@14.2.1 css-loader@5.2.7" />

<br />

:::warning
Pay attention to install exactly these versions.  
Newer versions may not work.
:::

## Usage

[Override the Webpack config](/docs/webpack) by using [`enableScss()`](/docs/enable-scss/enable-scss).

```ts twoslash title="remotion.config.ts"
import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';

Config.overrideWebpackConfig((currentConfiguration) => {
  return enableScss(currentConfiguration);
});
```

## APIs

<TableOfContents />
